<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/sasspublic.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/detal.css">
    <style>
        
    </style>
</head>
<body>
    <div id="header">
        <div id="nav">
            <div id="left">
                <a href="../index.html">Hi,欢迎来到ht的洋码头！</a>
                <a href="">我是买手</a>
            </div>
            <div id="loginbar">
                <ul>
                    <li><a href="login.html">登录</a></li>
                    <li><a href="logon.html">注册</a></li>
                    <li><a class="cart">购物车</a></li>
                    <li><a href="">我的订单</a></li>
                    <li><a href="">个人中心</a></li>
                    <li><a href="">规则&公告</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="logo"><a href=""></a></div>
            <form id="search">
                <input type="text" placeholder="搜索你要找的商品">
                <div id="searchbtn"></div>
            </form>
        </div>
        <div class="nav clearfix">
            <ul>
                <li>首页</li>
                <li>今日限时抢</li>
                <li>洋货集</li>
                <li class="tab">分类 <span></span></li>
            </ul>
        </div>
        <!-- 二级导航 关联上面的 "分类"-->
        <div class="secondBar">
            <ul>
                <li class="nav1">分类 <span></span></li>
                <li class="sbar clearfix">
                </li>
            </ul>
        </div>
    </div>
    <div id="detalmain" class="clearfix">
    </div>
    <div id="last">
        <div id="details">
            <img src="../static/details.png" alt="">
        </div>
        <div id="more">
            <div id="total">
                <ul>
                    <li>购物指南</li>
                    <li>订单服务</li>
                    <li>支付与配送</li>
                    <li>售后服务</li>
                    <li>官方微信</li>
                </ul>
            </div>
            <div id="tomore">
                <ul>
                    <li>注册与登录</li>
                    <li>账户信息维护</li>
                    <li>购物流程</li>
                    <li>会员体系</li>
                    <li>常见问题</li>
                </ul>
                <ul>
                    <li>订单状态说明</li>
                    <li>自动取消顶大</li>
                    <li>上传身份证</li>
                    <li>&nbsp; </li>
                    <li>&nbsp; </li>
                </ul>
                <ul>
                    <li>支付方式</li>
                    <li>优惠劵和红包</li>
                    <li>如何提现</li>
                    <li>配送方式</li>
                    <li>&nbsp; </li>
                </ul>
                <ul>
                    <li>消费维权</li>
                    <li>纠纷处理规则</li>
                    <li>退货规则</li>
                    <li>&nbsp; </li>
                    <li>&nbsp; </li>
                </ul>
                <div>
                    <img id="qrvx" src="../static/QRvx.png" alt="">
                </div>
            </div>
        </div>
        <div id="about">
            <p>关于码头</p><span>|</span>
            <p>码头招聘</p><span>|</span>
            <p>网站地图</p><span>|</span>
            <p>所有帮助</p><span>|</span>
            <p>海外招商中心</p><span>|</span>
            <p>扫货买手规则</p><span>|</span>
            <p>卖家常见问题</p>
        </div>
        <div id="link">
            <p>55bbs我爱购物网</p><span>|</span><p>篱笆网</p><span>|</span><p>闺蜜网</p><span>|</span>
            <p>名品导购网</p><span>|</span><p>瑞丽女性网</p><span>|</span><p>起点中文网</p><span>|</span>
            <p>酷6网</p><span>|</span><p>太平洋返利网</p><span>|</span><p>海外折扣拼团网</p><span>|</span>
            <p>韩都衣舍</p><span>|</span><p>嘉年乐</p><span>|</span><p>为为网购商城</p><span>|</span><br>
            <p>同城购物网</p><span>|</span><p>齐家网</p><span>|</span><p>网上商城</p><span>|</span>
            <p>礼品公司</p><span>|</span><p>留学服务中心</p><span>|</span>
            <p>礼派</p><span>|</span><p>快易拍</p><span>|</span>
            <p>手表</p><span>|</span><p>卡当创意礼物</p><span>|</span><p>户外装备</p><span>|</span>
            <p>母婴展</p><span>|</span><p>微财富理财</p><span>|</span><p>更多>></p>
        </div>
        <div id="auth">
            <div id="imgbox"></div>
            <div>
                <span>© 2009－2019 ymatou.com, All rights reserved 增值电信业务经营许可证：沪B2-20140021</span><br>
                <p>上海洋码头网络技术有限公司  版权所有 备案号（ 沪ICP备11050082号 ）</p><br>
                <span>上海市静安区江场三路93号13层</span>
            </div>
            <div id="footer">
                <div id="business"></div>
                <div id="footerf">
                    <p>沪公网安备 31010802001410号</p><span>|</span> 
                    <span>违法不良信息举报电话：021-80185223</span><span>|</span>
                    <p>上海市互联网上海市互联网举报中心</p><br><br>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../js/ajax-promise.js"></script>
<script src="../js/public.js"></script>
<script >
    // 选项卡
    class Tab{
        constructor(){
            this.tab=document.querySelector(".tab");
            this.secondBar=document.querySelector(".secondBar");
            this.nav1=document.querySelector(".nav1");
            this.sbar=document.querySelector(".sbar");
            this.url="http://localhost/ht/yangmatou/src/json/tab.json"
            this.load();
            this.sbar1=document.querySelector(".sbar1");
            this.addEvent();
        }
        addEvent(){
            var that=this;
            that.sbar.onclick=function(){
                location.href="./goodsList.html";
            }
            this.tab.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.tab.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
            this.nav1.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.nav1.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
            this.sbar.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.sbar.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
        }
        load(){
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            for(var i=0;i<14;i++){
                this.sbar.innerHTML+=`<div class="sbar1">
                        <div class="left"><p>${this.res[i].sorc}<span></span></p><i>${this.res[i].sorcs}</i></div>
                        <div class="right"><img src="${this.res[i].img}" alt=""></div>
                    </div>`;
            }
            this.sbar.innerHTML+=`<div id="sbarlast">
                        <div class="left"><p>更多<span></span></p><i>More</i></div>
                    </div>`;
        }
    }
    // 运行选项卡
    new Tab;
    // 商品展示
    class Details{
        constructor(){
            this.detalmain = document.querySelector("#detalmain");
            this.url = "http://localhost/ht/yangmatou/src/json/goods.json";
            this.load();
            this.getId();
            this.u1="myCart.html";
            this.u2="login.html";
        }
        getId(){
            this.id = location.search.slice(1).split("=")[1];
        }
        load(){
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            this.res.forEach(val => {
                if(val.goodsId === this.id){
                    this.detalmain.innerHTML=`<div id="waresPhoto"  class="magnifier">
                        <div id="bigPhoto" class="s_box">
                            <img src="${val.img.largeImg[0]}" alt="">
                            <span></span>
                            <p class="mask"></p>
                        </div>
                        <div class="b_box">
                            <img src="${val.img.largeImg[0]}" alt="">
                        </div>
                        <div id="smalllPhotos" class="clearfix">
                            ${this.createLi(val.img.smallImg)}
                        </div>
                    </div>
                    <div id="waresDetal">
                        <div class="goodsname"><p>${val.name}</p></div>
                        <div id="yunfeix"><span>${val.yunfeix}</span></div>
                        <div id="priceBlock">
                            <div class="prices"><span>价格</span><del>${val.costprice}</del></div>
                            <div class="goodsprice"><span>促销价</span><a>${val.price}</a></div>
                        </div>
                        <div id="yunfei"><i>运费</i><em>浙江杭州</em>至<em>西安</em>快递：<em>0.00</em></div>
                        <div id="sales">
                            <i>月销量<b>2284</b></i><span>|</span>
                            <i>累计评价<b>2897</b></i><span>|</span>
                            <i>送天猫积分<b id="jifen">34</b></i>
                        </div>
                        <div class="goodsnature">
                            <div class="goodssizes"><i>${val.gnorms}</i>${this.createLi1(val.size)}</div>
                            <div class="goodscolors"><i>${val.cnorms}</i>${this.createLi2(val.color)}</div>
                            <div class="number"><i>数量</i><a>&nbsp;&nbsp;-&nbsp;</a><input type="text" id="sum" value="1" readonly><a>&nbsp;+&nbsp;&nbsp;</a></div>
                        </div>
                        <div id="butbox"><button id="mai">立即购买</button><button id="join" class="join">加入购物车</button></div>
                        <div id="metatit">
                            <ul>
                                <li>服务承诺</li>
                                <li>正品保证</li>
                                <li>极速退款</li>
                                <li>赠运费险</li>
                                <li>七天无理由退换</li>
                            </ul>
                        </div>
                    </div>`;
                }
            });
            this.join= document.querySelector(".join");
            new Large();
            this.addEvent();
        }
        addEvent(){
            this.m = window.sessionStorage.getItem("userMsg");
            this.m = this.m ? JSON.parse(this.m) : {};
            var that=this;
            this.join.onclick=function(){
                if(that.m.user){
                    that.setData();
                    // location.href=that.u1;
                }else{
                    location.href=that.u2;
                }
            }
        }
        setData(){
            var gm=localStorage.getItem("goodsMsg");
            if(gm===null){
                gm=[{
                    goodsId:this.id,
                    num:1,
                    msg:this.getData(this.id)
                }];
            }else{
                gm=JSON.parse(gm);
                var status=0;
                for(var i=0;i<gm.length;i++){
                    if(gm[i].goodsId===this.id){
                        gm[i].num++;
                        status=1;
                        break;
                    }
                }
                if(status==0){
                    gm.push({
                        goodsId:this.id,
                        num:1,
                        msg:this.getData(this.id)
                    })
                }
            }
            localStorage.setItem("goodsMsg",JSON.stringify(gm));
        }
        getData(id){
            for(var i=0;i<this.res.length;i++){
                if(this.res[i].goodsId===id){
                    return this.res[i];
                }
            }
            return {};
        }
        createLi(arr){
            let str = "";
            for(let i=0;i<arr.length;i++){
                str += `<div><img src="${arr[i]}" alt=""></div>`
            }
            return str;
        }
        createLi2(arr){
            let str = "";
            for(let i=0;i<arr.length;i++){
                str += `<span><img src="${arr[i]}" alt=""></span>`
            }
            return str;
        }
        createLi1(arr){
            let str = "";
            for(let i=0;i<arr.length;i++){
                str +=`<span>${arr[i]}</span>`;
            }
            return str;
        }
    }
    new Details;
    
    // 放大镜
    class Large{
        constructor(imgData){
            this.sBox = document.querySelector(".s_box");
            this.sImg = document.querySelector(".s_box img");
            this.sSpan = document.querySelector(".s_box span");
            this.bBox = document.querySelector(".b_box");
            this.bImg = document.querySelector(".b_box img");
            this.div = document.querySelectorAll("#smalllPhotos div");

            this.imgData = imgData;
            
            this.addEvent();
        }
        addEvent(){
            var that = this;
            this.sBox.onmouseover = function(){
                that.over();
            }
            this.sBox.onmousemove = function(eve){
                var e = eve || window.event;
                that.move(e);
            }
            this.sBox.onmouseout = function(){
                that.out();
            }
            for(let i=0;i<this.div.length;i++){
                this.div[i].onclick = function(){
                    that.sImg.src = that.imgData.smallImg[i];
                    that.bImg.src = that.imgData.largeImg[i];
                }
            }
        }
        over(){
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
        }
        move(e){
            var l = e.offsetX - this.sSpan.offsetWidth/2;
            var t = e.offsetY - this.sSpan.offsetHeight/2;
            if(l<0) l=0;
            if(t<0) t=0;
            if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
            this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
        }
        out(){
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }
    // 验证是否能进入购物车
    new IfLogin({
        url1:"myCart.html",
        url2:"login.html",
        add:document.querySelectorAll(".cart")
    });
    
</script>
</html>